<template>
  <div class="infoBox">
    <div class="title">{{ data.title }}</div>
    <div class="navBox">
      <van-grid clickable :column-num="3" :border="false" icon-size="26px">
        <van-grid-item
          v-for="item in data.grid"
          :key="item.text"
          :icon="item.icon"
          :text="item.text"
          :to="item.to"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Grid',
  props: ['data']
};
</script>

<style lang="scss" scoped>
// 导航
.title {
  color: #101010;
  padding: 15px 0 14px;
  border-bottom: 1px solid #F5F5F5;
  margin: 0 20px 15px;
}
.infoBox {
  position: relative;
  top: -96px;
  width: 345px;
  background-color: #fff;
  margin: 0 15px 10px;
  border-radius: 5px;
  box-sizing: border-box;
  box-shadow: 0px 0px 9px 2px rgba(221, 221, 221, 0.31);
  // 信息
  .info {
    margin-top: 20px;

    .info-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 26px 24px 22px;
    }

    .info-left {
      display: flex;
      align-items: center;

      .info-left-right {
        font-size: 20px;
        color: #333;
        padding-left: 10px;

        .department {
          font-size: 14px;
          color: #A2A2A2;
          padding-top: 10px;
        }
      }
    }

    .info-bottom {
      display: flex;
      align-items: center;

      .item {
        display: flex;
        align-items: center;
        flex-direction: column;
        color: #838383;
        padding-bottom: 20px;
        flex: 1;

        .num {
          font-size: 22px;
          color: #0A8EFF;
          padding-bottom: 6px;
        }

        .num1 {
          color: #333;
        }
      }

      .line {
        height: 32px;
        color: #F5F5F5
      }
    }
  }
}
</style>
